<template>
  <!-- 正常的网页标签也能使用，但是不建议使用。不利于跨平台操作 -->
  <view>
    <!-- 搜索框的实现  利用easycom的特性，所以可直接使用，不用注册-->
    <search></search>
    <!-- 轮播图    name组件内部读取的list参数中的属性名 .轮播图组件高度自带250的高，照片宽高 100%，比例不够完美，所以按照小程序的标准手动设置了一个 340 px的高,-->
    <view class="swiperList">
      <u-swiper
        name="image_src"
        :list="swiperList"
        :effect3d="true"
        height="340"
      ></u-swiper>
    </view>
    <!--导航的开始 -->
    <!--  uView里内置样式 u-flex是一个集合类 u-flex是uView组件封装好的内置样式 .u-flex {display: flex;flex-direction: row;align-items: center;} 
    -->
    <view class="navItem u-flex">
      <!-- u-flex-1 代表 flex = 1； u-padding-x == u-p-x x是需要设置的padding值-->
      <navigator
        class="u-flex-1 u-padding-30"
        v-for="item in navList"
        :key="item.name"
      >
        <u-image width="100%" :src="item.image_src" mode="widthFix"></u-image>
      </navigator>
    </view>
    <!-- 楼层开始 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="(item1, index1) in floorsList"
        :key="index1"
      >
        <view class="group-title">
          <u-image
            mode="widthFix"
            width="100%"
            :src="item1.floor_title.image_src"
          ></u-image>
        </view>
        <view class="group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <!-- scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
             -->
            <u-image
              height="100%"
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图列表
      swiperList: [],
      // 导航列表
      navList: [],
      // 楼层数组
      floorsList: [],
    };
  },
  // 方便开发者阅读代码，本质上还是异步请求，只是看起来像同步
  async onLoad() {
    //  使用组件封装的请求方式
    // const res= await this.$u.get('http://www.example.com', {}, {
    // 		token: 'xyz'
    // 	}).then(res => {
    // 		console.log(res);
    // 	});
    // }
    const resSwiper = await this.$u.get("/home/swiperdata");
    this.swiperList = resSwiper.message;
    // 【注】 第一个是接收的错误结果，第二个才是真正返回的数组，
    // uni.request 支持permission的写法 即。.then（）
    // const [err, res] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    // });

    // console.log(res);
    // this.swiperList = res.data.message;
    // 返回数组原本的值，并解构自身？？？
    // this.swiperList = res.data.message.map((v)=>({...v}));
    // 等价于下面写法
    // this.swiperList = res.data.message.map(v=>v);
    // 给数组中的每个对象添加了 属性 image 属性值 image_src 。
    // this.swiperList = res.data.message.map((v) => ({
    //   ...v,
    //   image: v.image_src,
    // }));
    /**
		* 1、map() 方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。
    2、map() 方法按照原始数组元素顺序依次处理元素。
    注意： map() 不会对空数组进行检测。
    注意： map() 不会改变原始数组。
    注意：函数的作用是对数组中的每一个元素进行处理，返回新的元素。
		*/
    // 进行导航的请求
    const resNav = await this.$u.get("/home/catitems");
    this.navList = resNav.message;
    console.log(resNav);
    // 楼层设置
    const resFloors = await this.$u.get("home/floordata");
    this.floorsList = resFloors.message;
    console.log(resFloors);
  },
};
</script>

<style lang="scss">
.floor {
  // 因为楼层的结构比较复杂，所以选择用浮动来进行布局处理而不用flex布局，flex布局适合处理那些比较小的，比较工整的页面布局，而在这里的布局用浮动更为适合。。因为设计稿的大小是750px，和小程序的规则吻合，比例为 1:1
  .floor-group {
    .group-title {
    }
    .group-content {
      // 清除浮动
      overflow: hidden;
      navigator {
        float: left;
        width: 33.33%;
        border-left: 5rpx solid #fff;
        border-right: 5rpx solid #fff;
        // padding-left: 5rpx;
        // &不能留空白
        //&:nth-last-child(-n + 4) 后四个
        &:nth-last-child(-n + 4) {
          height: 190rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>